<template>
    <div id="home">
         <navbar class="navbar">

            <navbar-item type="back"></navbar-item>

            <navbar-item type="title">
                <text class="text">宠物养成计划</text>
            </navbar-item>

        </navbar>
        <div class="app">

        <banner class="banner" @itemClick="itemClick">
            <div class="banner-frame" v-for="(img,index) in imageList" :key="index">
                <image class="banner-image" resize="cover" :src="img.src"></image>
            </div>
        </banner>
         <grid class="grid">

                <div class="grid-item" v-for="(item,index) in gridLists" :key="index">
                    <image class="item-image" resize="cover"
                        :src="item.src"></image>
                    <text class="item-title">{{item.text}}</text>
                </div>

         </grid>
        </div>
       
    </div>
       
</template>
<script>
export default {
    data(){
        return{
            imageList:[
                { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
                { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
                 { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
            ],
            gridLists:[
                {
                    src:'https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1785611105.jpg',
                    text:'宠物商城'
                },
                 {
                    src:'https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1785611105.jpg',
                    text:'宠物百科'
                },
                 {
                    src:'https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1785611105.jpg',
                    text:'宠物医疗'
                },
            ]
        }
    }
}
</script>

<style scoped>
    .navbar {
        width: 750px;
        height: 100px;
    }
    .text{
        color: white;
        font-size: 32px;
    }

     .app {
        width: 750px;
        flex: 1;
    }

    .banner {
        width: 750px;
        height: 420px;
    }

    .banner-frame {
        width: 750px;
        height: 420px;
        position: relative;
    }

    .banner-image {
        width: 750px;
        height: 420px;
    }
     .grid {
        width: 750px;
        height: 570px;
    }

    .grid-item {
        width: 250px;
        height: 180px;
        align-items: center;
    }

    .item-image {
        margin-top: 10px;
        width: 120px;
        height: 120px;
        border-radius: 90px;
    }

    .item-title {
        width: 250px;
        height: 50px;
       
        text-align: center;
    }
</style>